【Day28】改變CSS的遊戲規則 - 自定義屬性CSS @property

15th鐵人賽

卡羅奇奇

2023-10-13 23:43:34

487 瀏覽

分享至

CSS @property

CSS @property支援度:Can I Use)

CSS @property允許定義自己的CSS屬性，以在CSS變換函數中使用，並允許進行屬性類型檢查、設定默認值以及定義該自定義屬性是否可以被繼承。

定義一個新的property時，需要有以下幾個屬性:

屬性	描述
`syntax`	定義屬性的語法規則(類型)，必需值。可接受的值如以下:length、number、percentage、length-percentage、color、image、url、integer、angle、time、resolution、transform-list、transform-function、custom-ident (a custom identifier string)
`inherits`	是否允許繼承，必需值。
`initial-value`	初始值

一般css屬性：

:root{
    --primary-color:black;
}

.container{
  width:100px;
  height:100px;
  background-color:var(--primary-color);
}

自定義屬性的情況：

@property --primary-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}
.container{
  width:100px;
  height:100px;
  background-color:var(--primary-color);
}

來看一下自定義屬性帶來什麼方便的地方呢?

像是CSS不支援background屬性直接有transition效果，那像是漸層就會沒有transition效果，如以下:

:root{
  --gradientColor1:#000;
  --gradientColor2:#fff; 
}

.container{
  width:100px;
  height:100px;
  background: linear-gradient(45deg, var(--gradientColor1), var(--gradientColor2));
  transition: 1s background;
  &:hover{
    --gradientColor1:red;
    --gradientColor2:pink; 
  }
}

利用自定義屬性，如以下:

@property --gradientColor1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}
@property --gradientColor2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}
.container{
  width:100px;
  height:100px;
  background: linear-gradient(45deg, var(--gradientColor1), var(--gradientColor2));
  transition: 1s --gradientColor1,1s --gradientColor2;
  &:hover{
    --gradientColor1:red;
    --gradientColor2:pink; 
  }
}